<template>
  <!-- v-container用于创建视点在中心的页面，而fluid属性可将其宽度拓展到充满容器 -->
  <v-app>
    <div class="register-container" @keyup.enter="onRegister">
      <div class="panel-wrapper">
        <v-layout column justify-center class="panel px-4">
          <v-flex md12 class="headline">{{ $t('login.headerTitle') }}</v-flex>
          <v-flex md9>
            <!-- <v-form action="login.jsp" method="post" id="loginForm"> -->
            <v-layout row wrap>
              <v-flex md12 mt-3>
                <v-text-field
                  outline
                  color="secondary"
                  prepend-inner-icon="account_circle"
                  :label="$t('login.login') + $t('login.account')"
                  v-model="loginAccount"
                  type="text"
                  name="username"
                  hide-details
                ></v-text-field>
              </v-flex>
              <v-flex md12 mt-3>
                <v-text-field
                  outline
                  color="secondary"
                  prepend-inner-icon="email"
                  :label="$t('login.email')"
                  v-model="email"
                  type="text"
                  name="email"
                  hide-details
                ></v-text-field>
              </v-flex>
              <v-flex md12 mt-3 d-flex align-center>
                <v-flex md8>
                  <v-text-field
                    outline
                    color="secondary"
                    @change="onAuthCodeChange"
                    prepend-inner-icon="security"
                    :label="$t('login.authCode')"
                    v-model="authCode"
                    type="text"
                    name="email"
                    hide-details
                  ></v-text-field>
                </v-flex>
                <v-flex md4>
                  <v-btn round flat :disabled="authBtn" @click="onGetAuthCode" color="blue">
                    <span class="subTitle">{{ authText }}</span>
                  </v-btn>
                </v-flex>
              </v-flex>
              <v-flex md12 mt-3>
                <v-text-field
                  outline
                  color="secondary"
                  prepend-inner-icon="call"
                  label="电话号码"
                  v-model="mobilePhone"
                  type="number"
                  name="mobilePhone"
                  hide-details
                ></v-text-field>
              </v-flex>
              <v-flex md12 mt-3>
                <v-text-field
                  outline
                  color="secondary"
                  prepend-inner-icon="lock"
                  :label="$t('login.setting') + $t('login.password')"
                  v-model="password"
                  type="password"
                  name="password"
                  hide-details
                ></v-text-field>
              </v-flex>
              <v-flex md12 mt-3>
                <v-text-field
                  outline
                  color="secondary"
                  prepend-inner-icon="lock_outline"
                  :label="$t('login.repeat') + $t('login.password')"
                  v-model="confirmedPassword"
                  type="password"
                  name="password"
                  hide-details
                ></v-text-field>
              </v-flex>
              <v-flex md12 text-xs-center mt-3>
                <v-btn @click="onRegister" round dark color="secondary" class="register-button">
                  <span class="title">{{ $t('login.register') }}</span>
                </v-btn>
              </v-flex>
            </v-layout>
            <!-- </v-form> -->
          </v-flex>
        </v-layout>
      </div>
    </div>

    <v-footer color="secondary" app>
      <div class="white--text pl-4">&copy; {{new Date().getFullYear()}}</div>
    </v-footer>
  </v-app>
</template>

<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import Cookie from "js-cookie";
import { Login } from "@/api";
import { VerificationCodeVo, CustomUserLoginInfo } from "@/api/bean";
declare const $Vue: Vue;

const COUNT_DOWW = 60;

@Component
export default class Register extends Vue {
  private loginAccount: string = "";
  private email: string = "";
  private authCode: string = "";
  private mobilePhone: string = "";
  private password: string = "";
  private confirmedPassword: string = "";

  private authBtn: boolean = false;
  private authText: string = "获取验证码";

  private countDown: number = COUNT_DOWW;

  private interval: any = null;

  protected mounted() {
    // this.testData()
  }

  private testData() {
    this.loginAccount = "oiJJd";
    this.email = "8923748@qq.com";
    this.authCode = "123456";
    this.mobilePhone = "1891236430";
    this.password = this.confirmedPassword = "123456";
  }

  private validate() {
    let pass = true;
    let message = "";

    // username
    if (this.authCode === "") {
      message = "请填写验证码";
      pass = false;
    }

    if (this.confirmedPassword === "") {
      message = "请再次填写密码";
      pass = false;
    }

    if (this.password === "") {
      message = "请填写密码";
      pass = false;
    }

    if (this.email === "") {
      message = "请填写邮箱地址";
      pass = false;
    }

    if (this.loginAccount === "") {
      message = "请填写账号";
      pass = false;
    }

    if (this.confirmedPassword !== this.password) {
      message = "两次填写的密码不一致";
      pass = false;
    }

    if (!pass) {
      $Vue.$emit("snackbar", {
        message
      });
    }

    return pass;
  }

  private onAuthCodeChange(value: string) {
    if (value.length === 6) {
      // this.validateAuthCode();
    }
  }

  // 注册成功后跳转到登录页
  private handleSuccess() {
    
    this.$router.push({
      name: "登录"
    });
  }

  private onGetAuthCode() {
    if (this.email === "") {
      return $Vue.$emit("snackbar", {
        message: "请填写邮箱"
      });
    }

    let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if (this.email.match(reg)) {
      // this.register();
      this.getAuthCode();
      this.authBtn = true;
      this.interval = setInterval(() => {
        this.authText = `${this.countDown}s后重新获取`;
        this.countDown--;
        if (this.countDown <= 0) {
          this.authBtn = false;
          this.authText = "获取验证码";
          this.countDown = COUNT_DOWW;
          clearInterval(this.interval);
        }
      }, 1000);
    } else {
      return $Vue.$emit("snackbar", {
        message: "邮箱格式不合法, 请重新填写"
      });
    }
  }

  private onRegister() {
      // this.register();
    if (!this.validate()) {
      return;
    } else {
      // this.register();
      this.validateAuthCode();
      // this.checkLoginAccount();
    }
  }

  /**
   * 注册
   */
  private async register() {
    // userType 2 为卖家
    const params: CustomUserLoginInfo = {
      userType: 2,
      username: this.loginAccount,
      email: this.email,
      loginAccount: this.loginAccount,
      mobilePhone: this.mobilePhone,
      password: this.password,
      confirmedPassword: this.confirmedPassword
    };
    const { data } = await Login.handleRegister.r(params);
    console.log("handleRegister", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    if (data.result === 0) {
      this.handleSuccess();
    } else {
      
    }
  }

  /**
   * 获取验证码
   */
  private async getAuthCode() {
    const params: VerificationCodeVo = {
      targetAddr: this.email,
      userType: 2
      // code: this.authCode,
    };
    const { data } = await Login.getAuthCode.r(params);
    console.log("getAuthCode", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    if (data.result === 0) {
      // $Vue.$emit('snackbar', {
      //   message: '验证码已发送到邮箱',
      // });
    } else {
    }
  }

  /**
   * 验证
   */
  private async validateAuthCode() {
    const params: VerificationCodeVo = {
      targetAddr: this.email,
      code: this.authCode,
      userType: 2
    };
    const { data } = await Login.validateAuthCode.r(params);
    console.log("getAuthCode", data);
    if (data.result === 0) {
      $Vue.$emit("snackbar", {
        message: data.message
      });
      this.checkLoginAccount();
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }

  /**
   * 验证
   */
  private async checkLoginAccount() {
    const params: any = {
      loginAccount: this.loginAccount,
      userType: 2
    };
    const { data } = await Login.checkLoginAccount.r(params);
    console.log("checkLoginAccount", data);
    if (data.result === 0) {
      console.log(data.data);
      if (data.data) {
        this.register();
        // this.validateAuthCode();
      }
    } else {
      $Vue.$emit("snackbar", {
        message: data.message
      });
    }
  }
}
</script>


<style lang="less">
.register-container {
  background-size: 100% 100% !important;
  background-position-y: 80% !important;
  background-repeat: no-repeat !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-image: url(../../assets/background.png) !important;

  .panel-wrapper {
    // flex-basis: 26%;
    width: 24rem;
  }
  .panel {
    width: 100%;
    height: 36rem;
    border-radius: 2rem;
    background-color: #ffffff88;
    .register-title {
      line-height: 2rem;
    }
  }

  .register-button {
    width: 12rem;
    height: 3rem;
  }
}
</style>

